<template>
  <div class="pick">
    <div class="pick-banner">
      <img
        src=" https://img.alicdn.com/imgextra/i1/2053469401/O1CN01TOYocQ2JJi5ynFG09_!!2053469401.jpg"
        alt=""
      />
    </div>
    <div class="pick-content">
      <van-tabs
        v-model:active="active"
        title-inactive-color="rgba(255,255,255,.8)"
        title-active-color="white"
        background="#5956FF"
        sticky
        @click="onClick"
      >
        <van-tab
          v-for="item in tabs"
          :key="item.id"
          :title="item.title"
          :name="item.name"
        >
          <div class="pick-products">
            <div class="pick-product" v-for="item in pickList" :key="item.id">
              <div class="pick-product-img">
                <img :src="item.pic" alt="" />
              </div>
              <div class="pick-product-label">
                <h3 class="pick-product-title">
                  <span></span>
                  {{ item.dtitle }}
                </h3>
                <div class="pick-product-price">
                  券后 <span class="rmb">¥</span
                  ><span class="price">{{ item.jiage }}</span>
                </div>
                <div class="pick-product-info">
                  <span class="info-label1" v-if="item.labelOne">
                    {{ item.labelOne }}
                  </span>
                  <span class="info-label2" v-if="item.labelTwo">
                    {{ item.labelTwo }}
                  </span>
                  <span class="info-quan" v-if="item.quanJine"
                    ><span>券</span>{{ item.quanJine }}元</span
                  >
                </div>
                <div class="pick-product-sales">
                  已抢{{
                    item.xiaoliang > 10000
                      ? parseInt(item.xiaoliang / 1000) / 10 + "万"
                      : item.xiaoliang
                  }}
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, onMounted } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const store = useStore();
    const state = reactive({
      tabs: [
        {
          id: 1,
          title: "美食",
          name: "food",
        },
        {
          id: 2,
          title: "居家日用",
          name: "day",
        },
        {
          id: 3,
          title: "女装",
          name: "woman",
        },
        {
          id: 4,
          title: "美妆",
          name: "beauty",
        },
        {
          id: 5,
          title: "数码家电",
          name: "digital",
        },
        {
          id: 6,
          title: "鞋品",
          name: "shoes",
        },
        {
          id: 7,
          title: "男装",
          name: "man",
        },
        {
          id: 8,
          title: "内衣",
          name: "inside",
        },
        {
          id: 9,
          title: "母婴",
          name: "child",
        },
        {
          id: 10,
          title: "家装家纺",
          name: "house",
        },
        {
          id: 11,
          title: "文娱车品",
          name: "car",
        },
        {
          id: 12,
          title: "配饰",
          name: "decoration",
        },
        {
          id: 13,
          title: "箱包",
          name: "bag",
        },
        {
          id: 14,
          title: "户外运动",
          name: "sport",
        },
      ],
    });

    const pickList = computed(() => store.state.pick.pickList);
    const onClick = (name: string) =>
      store.dispatch({
        type: "pick/getPickList",
        val: name,
      });
    onMounted(() =>
      store.dispatch({
        type: "pick/getPickList",
        val: "food",
      })
    );
    return {
      ...toRefs(state),
      pickList,
      onClick,
    };
  },
});
</script>

<style lang="stylus" scoped>
.pick
    background #5956FF
    font-size .12rem
    padding-top .44rem
    .pick-banner
        height 1.9rem
        img
            width 100%
            height 100%
    .pick-content
            /deep/.van-sticky--fixed
              top .44rem !important
        /deep/.van-tabs__nav
            .van-tab
                font-size .154rem
            .van-tabs__line
                background white
                height 2px
        .pick-products
            display flex
            justify-content space-around
            flex-wrap wrap
            .pick-product
                width 1.8rem
                border-radius 0 0 .05rem .05rem
                overflow hidden
                margin-top .1rem
                background white
                .pick-product-img
                    width 1.8rem
                    height 1.8rem
                    img
                        width 100%
                        height 100%
                .pick-product-label
                    padding .1rem
                    .pick-product-title
                        margin 0
                        font-weight normal
                        font-size .12rem
                        height 0.32rem
                        span
                            min-width .23rem
                            height .13rem
                            border-radius 2px
                            background-image url(https://img.alicdn.com/imgextra/i1/2053469401/O1CN01o1MI292JJhz37UySP_!!2053469401.png)
                            display inline-block
                            margin-right 3px
                            background-size 100%
                            background-repeat no-repeat
                            background-position center
                            position relative
                            z-index 1
                            zoom 1
                            top 2px
                    .pick-product-price
                        color #666666
                        .rmb
                            color #ff2b22
                        .price
                            color #ff2b22
                            font-size .19rem
                    .pick-product-info
                        margin .02rem 0
                        .info-label1
                            height .12rem
                            border-radius .02rem
                            border 1px solid
                            font-size .095rem
                            font-weight 400
                            color #ff0137
                            padding 0 .03rem
                            margin-right .05rem
                            display inline-block
                            line-height .12rem
                            vertical-align middle
                            border-color rgba(255,1,55,.55)
                        .info-label2
                            height .12rem
                            border-radius .02rem
                            border 1px solid
                            font-size .095rem
                            font-weight 400
                            padding 0 .03rem
                            margin-right .05rem
                            display inline-block
                            line-height .12rem
                            vertical-align middle
                            border-color rgba(245,114,36,.7)
                            color #F57223
                        .info-quan
                            height .14rem
                            background linear-gradient(90deg,#ff8873 0,#ff4f4f 100%)
                            border-radius .02rem
                            padding 0 .05rem 0 .01rem
                            font-size .095rem
                            font-weight 400
                            color #fff
                            line-height .14rem
                            display inline-block
                            position relative
                            z-index 1
                            zoom 1
                            top 0
                            vertical-align middle
                            span
                                background #fff
                                border-radius 1px 0 0 1px
                                font-size .1rem
                                color #FE3A33
                                margin auto 5px auto 0
                                min-width .12rem
                                max-width .12rem
                                min-height .12rem
                                max-height .12rem
                                display inline-block
                                line-height .12rem
                                text-align center
                                vertical-align middle
                    .pick-product-sales
                        color #888888
</style>
